<!-- 搜索框组件 -->
<script setup>
import router from '@/router/index.js'
import http_posts from '@/api/posts.js'
import { onMounted, ref } from 'vue'
import { CaretRight } from '@element-plus/icons-vue'
import http_search from '@/api/search.js'
import { useCityStore } from '../stores/city'

const cityStore = useCityStore()

const categoryList = ref([]) // 职位分类列表
const categoryChildrenList = ref([])
const searchContent = ref('')
// 悬浮在职位信息上
const enterInto = (index) => {
  categoryChildrenList.value = categoryList.value[index]
}
const hotList = ref([
  { postsId: '1', name: 'Java' },
  { postsId: '2', name: 'PHP' },
  { postsId: '3', name: 'Android' },
  { postsId: '4', name: '测试工程师' },
  { postsId: '5', name: '运维工程师' },
  { postsId: '6', name: '网络工程师' },
  { postsId: '7', name: 'IT技术支持' },
  { postsId: '8', name: '数据开发' }
])

// 搜索框输入之后向后台发送请求,使用节流防抖
const throttleTimeout = ref(null)
const debounceTimeout = ref(null)
const searchList = ref([])
//输入的节流
const throttleSearch = () => {
  if (searchContent.value === '') {
    searchList.value = []
  } else {
    if (throttleTimeout.value) {
      clearTimeout(throttleTimeout.value)
    }
    throttleTimeout.value = setTimeout(async () => {
      const result = await http_search.getAllByName(searchContent.value)
      if (result.code === 200) {
        const company = result.data.company
        const posts = result.data.posts
        let i
        for (i = 0; i < 5; i++) {
          if (company[i] == null) {
            break
          }
          searchList.value.push(company[i])
        }
        if (i === 5 && posts.length >= 5) {
          for (i = 0; i < 5; i++) {
            searchList.value.push(posts[i])
          }
        } else {
          for (i = 0; i < posts.length; i++) {
            searchList.value.push(posts[i])
          }
          for (i = 5; i < 15 - searchList.value.length; i++) {
            if (company[i] == null) {
              break
            }
            searchList.value.push(company[i])
          }
        }
      }
    }, 300) // 节流时间间隔，可以根据实际需求调整
  }
}
//点击的节流
const debounceSearch = () => {
  if (debounceTimeout.value) {
    clearTimeout(debounceTimeout.value)
  }
  debounceTimeout.value = setTimeout(() => {
    search(searchContent.value)
  }, 200) // 防抖时间间隔，可以根据实际需求调整
}
const search = async (key) => {
  router.push({
    path: '/search',
    query: { key, city: cityStore.city }
  })
  searchContent.value = ''
  await http_search.saveHistory(key)
  getHistoryList()
}
// 输入框获得焦点
const inputFocus = () => {
  if (searchContent.value === '') {
    searchList.value = []
    searchFlag.value = true
  } else {
    searchFlag.value = true
  }
}
// 输入框失去焦点
const inputBlur = () => {
  setTimeout(() => {
    searchFlag.value = false
  }, 100)
}
// 获得历史记录
const historyList = ref([])
const getHistoryList = async () => {
  const result = await http_search.getHistory()
  historyList.value = result.data
}
// 清空历史记录
const clearHistory = () => {
  http_search.clearHistory()
  historyList.value = []
}
const searchFlag = ref(false)
onMounted(async () => {
  const result = await http_posts.getCategoryList()
  if (result.code === 200) {
    categoryList.value = result.data
  }
  getHistoryList()
})
</script>

<template>
  <div class="search">
    <div class="category">
      <el-dropdown trigger="click">
        <div class="categoryBox">
          <span>职位类型</span>
          <el-icon class="icon"><CaretBottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu
            style="width: 200px; height: 210px; overflow-y: scroll"
          >
            <el-popover
              v-for="(item, index) in categoryList"
              :key="item.categoryId"
              placement="right"
              :width="700"
              trigger="hover"
              @before-enter="enterInto(index)"
            >
              <template #reference>
                <div>
                  <el-dropdown-item class="item"
                    ><div>
                      {{ item.name }}
                    </div>
                    <div
                      style="
                        position: absolute;
                        right: 10px;
                        color: #ccc;
                        font-size: 12px;
                      "
                    >
                      <el-icon><CaretRight /></el-icon></div
                  ></el-dropdown-item>
                </div>
              </template>
              <div
                style="
                  height: 240px;
                  overflow-y: scroll;
                  border-radius: 5%;
                  padding: 10px;
                "
              >
                <div style="font-size: 18px">
                  {{ categoryChildrenList.name }}
                </div>
                <div
                  style="display: flex"
                  v-for="itemChildren in categoryChildrenList.children"
                  :key="itemChildren.categoryId"
                >
                  <div style="color: #a8a8a8; flex: 1; margin-top: 15px">
                    {{ itemChildren.name }}
                  </div>
                  <div
                    style="
                      flex: 4;
                      border-bottom: 1px solid #eee;
                      padding-bottom: 15px;
                    "
                  >
                    <span
                      style="
                        display: inline-block;
                        margin-left: 20px;
                        margin-top: 15px;
                        cursor: pointer;
                      "
                      class="text"
                      v-for="itemChildren2 in itemChildren.children"
                      :key="itemChildren2.categoryId"
                      >{{ itemChildren2.name }}</span
                    >
                  </div>
                </div>
              </div>
            </el-popover>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <input
      class="input"
      @input="throttleSearch"
      placeholder="搜索职位、公司"
      v-model="searchContent"
      type="text"
      @focus="inputFocus"
      @blur="inputBlur"
    />
    <div class="searchBox" v-show="searchFlag">
      <div
        v-for="(item, index) in searchList"
        :key="index"
        v-html="item[0]"
        class="searchItem"
        @click="search(item[1])"
      ></div>
    </div>
    <div @click="router.push('/map')" class="map">
      <span class="iconfont icon-map"></span>
      <span>地图</span>
    </div>
    <div @click="debounceSearch" class="button">搜索</div>
  </div>
  <div style="margin-left: 350px; margin-top: -15px; margin-bottom: 10px">
    <span style="color: #999">搜索历史:</span>
    <el-tag
      style="margin-left: 15px; cursor: pointer"
      v-for="(item, index) in historyList"
      :key="index"
      class="mx-1"
      type="info"
      @click="search(item.searchContent)"
    >
      {{ item.searchContent }}
    </el-tag>
    <el-button
      style="position: absolute; left: 1020px; top: 305px"
      size="small"
      type="primary"
      link
      @click="clearHistory"
      >清空历史</el-button
    >
  </div>
  <div class="hot">
    <div class="title">热门职位：</div>
    <el-tag
      class="item"
      v-for="item in hotList"
      size="large"
      :key="item.postsId"
      >{{ item.name }}</el-tag
    >
  </div>
</template>

<style lang="scss" scoped>
.mx-1:hover {
  background-color: #409eff;
  color: #fff;
}
.search {
  color: black;
  font-size: 16px;
  width: 55%;
  height: 55px;
  background-color: #fff;
  border: 2px solid #00b3b2;
  border-radius: 15px;
  margin: 25px auto;
  display: flex;
  position: relative;
  .category {
    width: 15%;
    height: 55px;
    text-align: center;
    line-height: 55px;
    cursor: pointer;
    .icon {
      font-size: 12px;
      margin-left: 15px;
      color: #ccc;
    }
  }
  .categoryBox {
    font-size: 16px;
    line-height: 50px;
    .item {
      display: flex;
      justify-content: space-between;
      position: relative;
    }
  }
  .categoryBox:hover {
    color: #00b3b2;
    .icon {
      color: #00b3b2;
    }
  }
  .input {
    font-size: 16px;
    border: 0;
    width: 50%;
    outline: none;
  }
  .map {
    width: 80px;
    position: absolute;
    right: 130px;
    cursor: pointer;
    .iconfont {
      color: #cccccc;
      font-size: 18px;
      display: inline-block;
      margin-right: 5px;
      line-height: 55px;
    }
  }
  .map:hover {
    color: #00b3b2;
    .iconfont {
      color: #00b3b2;
    }
  }
  .button {
    width: 120px;
    background-color: #00bebd;
    color: white;
    font-weight: 900;
    font-size: 20px;
    text-align: center;
    line-height: 55px;
    border-radius: 10px;
    position: absolute;
    right: 0px;
    cursor: pointer;
  }
  .text {
  }
}
.text:hover {
  color: #409eff;
}
.hot {
  display: flex;
  position: relative;
  left: 22%;
  .title {
    color: #666;
    line-height: 33px;
    margin-right: 10px;
  }
  .item {
    margin-right: 15px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
  }
  .item:hover {
    color: white;
    background-color: #409eff;
  }
}
.searchBox {
  width: 600px;
  background-color: #fff;
  position: absolute;
  left: 120px;
  border-radius: 15px;
  margin-top: 63px;
  box-shadow: 5px 5px 15px #ddd;
  z-index: 999999;
  font-size: 14px;
  .searchItem {
    padding: 11px;
    padding-left: 15px;
    cursor: pointer;
  }
  .searchItem:hover {
    background-color: rgba($color: #ccc, $alpha: 0.1);
  }
}
</style>
